<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'>
    <title>个人中心</title>
    <link rel="stylesheet" href="../static/css/center.css">
</head>
<body>
<div class="container">
    <div id="backButton">
        <a href="{{ url_for('dashboard') }}">
            <button class="bx bx-left-arrow icon" > 返回首页 </button>
        </a>
    </div>
    <!-- 显示 flash 消息 -->
    {% with messages = get_flashed_messages(with_categories=True) %}
        {% if messages %}
            <ul class="flashed-messages">
                {% for category, message in messages %}
                    <li class="{{ category }}">{{ message }}</li>
                {% endfor %}
            </ul>
        {% endif %}
    {% endwith %}
    <form id="user-form" method="POST">
        <div class="avatar-section">
            <img id="avatar" src="../static/image/avatar.jpg" alt="用户头像">
            <button id="change-avatar-btn">更换头像</button>
            <input type="file" id="avatar-input" style="display: none;" accept="image/*">
        </div>
        <div class="input-group">
            <span>昵称：</span>
            <input type="text" id="username-input" name="username" placeholder="请输入昵称" value="{{ user.username }}" required>
        </div>
        <div class="input-group">
            <span>密码：</span>
            <input type="password" id="inputPass" name="password" placeholder="******" required>

            <!-- 使用 a 标签作为按钮 -->
            <a href="{{ url_for('changepass') }}" class="button">修改密码</a>
        </div>

        <div class="input-group">
            <span>邮箱：</span>
            <input type="email" name="email" placeholder="请输入邮箱" value="{{ user.email }}" required>
        </div>
        <div class="input-group">
            <span>个人简介：</span>
            <textarea id="bio" name="bio" rows="4" cols="50">{{ user.bio }}</textarea>
        </div>
        <!-- Combined Country/Province/City Selection -->
        <div class="input-group">
            <span>地址信息：</span>

            <label for="province"></label>
            <select id="province" name="province"> <!-- 添加 name="province" -->
                <option value="">请选择省份</option>
                <option value="湖北省">湖北省</option>
                <option value="湖南省">湖南省</option>
            </select>

            <label for="city"></label>
            <select id="city" name="city"> <!-- 添加 name="city" -->
                <option value="">请选择城市</option>
            </select>

            <label for="district"></label>
            <select id="district" name="district"> <!-- 添加 name="district" -->
                <option value="">请选择区</option>
            </select>
        </div>

        <div class="input-group">
            <span>街道地址：</span>
            <input type="text" id="address" name="street_address" value="{{ user.street_address }}" required>
        </div>
        <div class="input-group">
            <span>联系电话：</span>
            <input type="tel" id="phone" name="phone_number" value="{{ user.phone_number }}" required>
        </div>
        <!-- Save Button -->
        <div class="input-group">
            <button  type="submit" id="save-btn">保存</button>
        </div>
    </form>
</div>
<script src="../static/js/center.js"></script>
</body>
</html>
